<template>
<div>
  <div class="wrap">
    <!-- <div>详情：ID-{{ $route.params.id }}</div> -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" class="banners"/>
      </van-swipe-item>
    </van-swipe>
    <img src="../../../../../../assets/images/nav_goback.png" alt="" class="backImg" @click="$router.go(-1)">
    <div class="content">
      <h2>{{title}}</h2>
      <p>{{content}}</p>
      <div class="footer">
        <div>
          <img :src=picsImg alt="">
          <span>{{names}}</span>
        </div>
        <div>{{dates}}</div>
      </div>
    </div>

    </div>

</div>
</template>

<script>
import getInfoData from './mockData'
export default {
  name:'QiXuanZiLiaoInfomation',
  mounted() {
    this.getData()
  },
  data() {
    return {
      images:[],
      title:"",
      content:'',
      names:'',
      dates:'',
      picsImg:'',
    }
  },
  methods: {
    getData(){
      let data = getInfoData(this.$route.params.id)
      console.log(data,'0000');
      this.images = data.pics;
      this.title = data.title;
      this.content = data.content;
      this.names = data.people.id;
      this.dates = data.people.time;
      this.picsImg = data.people.pic;
    },

  },
};
</script>

<style  lang="stylus" rel="stylesheet/stylus" scoped>
.wrap{
  background: #fff;
}
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 230px;
    text-align: center;
    .banners{
      width 100%
      height 100%
    }
  }
  .backImg{
    width 12px
    height 20px
    position absolute
    top 32px
    left 15px
  }
  .content{
    padding 15px
    box-sizing border-box
    h2{
      line-height 35px
    }
    p{
      line-height 25px
    }
    .footer{
      display: flex;
      justify-content: space-between;
      color #999
      font-size 12px
      line-height 30px
      img{
        width 18px
        height 18px
        vertical-align text-bottom
        margin-right 6px
      }
    }

  }
 
</style>
